<template>
    <div class="exercisesDetail">
        <div class="box">
            <div class="subject">
                <div class="content">
                      练习题题目:
                      <span class="content-span">题型：{{queType[queList[current].questionType]}}</span>
                      <span class="content-span">类型：{{queCategory[queList[current].type]}}</span>
                      <span class="content-span">难度：{{queDifficulty[queList[current].level]}}</span>
                      <el-button style="float: right" type="text" @click="downLoad" v-if="queList[current].questionType!==2&&queList[current].questionType!==3">下载附件</el-button>
                  <div class="text">
                        <div class="detail" v-html="queList[current].questionInformation"></div>
                  </div>
                </div>
            </div>
            <div class="answer">
                <div class="content" v-if="queList[current].questionType==3">
                  我的答案:
                  <div class="input-c" style="padding: 10px 0;"><el-select v-model="queList[current].studentAnswer" placeholder="请选择答案" size="small">
                    <el-option
                        v-for="dict in answerList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                  </el-select></div>
                </div>
              <div class="content" v-else>
                <div>
                  我的答案:
                  <el-button style="float: right" type="text" v-if="queList[current].questionType!==2&&queList[current].questionType!==3">上传附件</el-button>
                  <div>
                    <el-input class="answer-textarea"
                                 type="textarea"
                                 :autosize="{ minRows: 3, maxRows: 5}"
                                 :rows="2"
                                 resize="both"
                                 :maxlength="500"
                                 :show-word-limit="true"
                                 placeholder="填空题答案请用英文逗号(',')分隔开"
                                 v-model="queList[current].studentAnswer">
                  </el-input>
                  </div>
                </div>
              </div>
            </div>
          <div class="answer" v-if="queList[current].publishType!==0">
            <div class="content">
              <div>
                答案信息:
                <el-button type="text" style="float: right" @click="downLoadAnswer" >下载附件</el-button>
              </div>
              <div class="text" v-html="queList[current].answerInformation" ></div>
              <div class="btn" v-if="queList[current].questionType!==2&&queList[current].questionType!==3"></div>
            </div>
          </div>
            <div class="page">
                <div class="btn">
                    <el-button type="primary" size="mini" round @click="saveCurrent(1)">保存</el-button>
                    <el-button type="primary" size="mini" round @click="previous">上一题</el-button>
                    <el-button type="primary" size="mini" round  @click="next">下一题</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import { mapState } from 'vuex'
  import {submitExervises} from "../../api/course";

  export default {
    name: 'exercisesDetail',
    created () {
      this.queList = this.$route.params.list
      this.current = this.$route.params.index
    },
    computed:{
      ...mapState({
        answerList:state=>state.dict.dictTree.work_answer['arr'],
        queType:state=>state.dict.dictTree.ea_question_type['obj'],
        queCategory:state=>state.dict.dictTree.ea_question_category['obj'],
        queDifficulty:state=>state.dict.dictTree.ea_question_difficulty['obj'],
      })
    },
    data(){
      return{
        current:'',
        queList:[],
      }
    },
    methods:{
      downLoadAnswer(){
        if(this.queList[this.current].questionUrls==''||this.queList[this.current].questionUrls==null||this.queList[this.current].questionUrls==undefined){
          this.$message.warning('该试题没有附件')
        }
        else{
          this.$download.name(this.queList[this.current].questionUrls)
        }
      },
      downLoad(){
        if(this.queList[this.current].answerUrls==''||this.queList[this.current].answerUrls==null||this.queList[this.current].answerUrls==undefined){
          this.$message.warning('该试题没有附件')
        }
        else{
          this.$download.name(this.queList[this.current].answerUrls)
        }
      },
      previous(){
        if (this.current===0){
          this.$message.warning('当前已是第一题')
        }
        else{
          let answer=this.queList[this.current].studentAnswer
          console.log(answer)
          if(answer!==''&&answer!==null){
            this.saveCurrent(0)
          }
          this.current--
        }
      },
      next(){
          console.log(this.queList)
        if (this.current===this.queList.length-1){
          this.$message.warning('当前已是最后一题')
        }
        else{
          let answer=this.queList[this.current].studentAnswer
          console.log(answer)
          if(answer!==''&&answer!==null){
            this.saveCurrent(0)
          }
          this.current++

        }
      },
      //保存
      saveCurrent(data){
        //data是否提示，1提示，0不提示
        let obj={
          id:this.queList[this.current].publishId,
          answerInformation:this.queList[this.current].studentAnswer,
          answerUrls:this.queList[this.current].studentUrls,
        }
        submitExervises(obj).then(res=>{
          console.log(res)
          if(res.code===200&&data===1){
            this.$message.success("保存成功")
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
    .exercisesDetail{
        .box{
            margin: 17px 20px;
            width: 770px;
            height: 680px;
            /*background: #FFFFFF;*/
            border-radius: 6px;
            >.subject{
                padding-top: 19px;
            }
            .title{
                text-align: left;
                margin-left: 19px;
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
            }
            .content{
              text-align: left;
              padding: 15px;
                margin: 18px auto;
                width: 730px;
                height: 183px;
                background: white;
                border-radius: 10px;
              .content-span{
                  display: inline-block;
                padding: 0 20px;
              }
                .text{
                    padding: 20px 20px 0 20px;
                    height: 165px;
                    overflow: auto;
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                    .topic{
                        font-size: 18px;
                    }
                }
                .btn{
                    margin-top: 10px;
                    text-align: right;
                    margin-right: 20px;
                    span{
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #999999;
                        padding-right: 64px;
                    }
                }
            }
            >.page{
                text-align: right;
                margin-right: 24px;
                span{
                    font-size: 14px;
                    color: #999999;
                }
            }
        }
    }

</style>
